<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信同步助手 - 扩展程序测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .warning {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        button {
            padding: 10px 15px;
            margin: 5px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .log {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            max-height: 300px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>微信同步助手 - 扩展程序测试</h1>
    
    <div id="status">
        <h2>扩展程序状态检查</h2>
        <div id="chrome-api" class="status">检查Chrome API可用性...</div>
        <div id="background-connection" class="status">检查与background通信...</div>
        <div id="database-access" class="status">检查数据库访问...</div>
        <div id="vue-loading" class="status">检查Vue.js加载...</div>
    </div>
    
    <h2>测试功能</h2>
    <button onclick="testChromeAPI()">测试Chrome API</button>
    <button onclick="testBackgroundConnection()">测试Background通信</button>
    <button onclick="testDatabase()">测试数据库</button>
    <button onclick="testVue()">测试Vue.js</button>
    
    <h2>日志输出</h2>
    <div id="log" class="log"></div>
    
    <script>
        const log = document.getElementById('log');
        
        function addLog(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `<span style="color: #666;">[${timestamp}]</span> ${message}`;
            
            if (type === 'error') {
                logEntry.style.color = '#dc3545';
            } else if (type === 'success') {
                logEntry.style.color = '#28a745';
            } else if (type === 'warning') {
                logEntry.style.color = '#ffc107';
            }
            
            log.appendChild(logEntry);
            log.scrollTop = log.scrollHeight;
        }
        
        function updateStatus(elementId, status, message) {
            const element = document.getElementById(elementId);
            element.innerHTML = message;
            element.className = `status ${status}`;
        }
        
        // 测试Chrome API可用性
        function testChromeAPI() {
            addLog('开始测试Chrome API...');
            
            if (typeof chrome === 'undefined') {
                updateStatus('chrome-api', 'error', '❌ Chrome API不可用 - 不在Chrome扩展环境中');
                addLog('错误: Chrome API不可用', 'error');
                return;
            }
            
            if (!chrome.runtime) {
                updateStatus('chrome-api', 'error', '❌ chrome.runtime不可用');
                addLog('错误: chrome.runtime不可用', 'error');
                return;
            }
            
            if (!chrome.runtime.sendMessage) {
                updateStatus('chrome-api', 'error', '❌ chrome.runtime.sendMessage不可用');
                addLog('错误: chrome.runtime.sendMessage不可用', 'error');
                return;
            }
            
            updateStatus('chrome-api', 'success', '✅ Chrome API可用');
            addLog('Chrome API测试通过', 'success');
        }
        
        // 测试与background的通信
        function testBackgroundConnection() {
            addLog('开始测试Background通信...');
            
            if (typeof chrome === 'undefined' || !chrome.runtime || !chrome.runtime.sendMessage) {
                updateStatus('background-connection', 'error', '❌ Chrome API不可用，无法测试通信');
                addLog('错误: Chrome API不可用，无法测试通信', 'error');
                return;
            }
            
            // 发送ping消息测试通信
            chrome.runtime.sendMessage({action: 'ping'}, (response) => {
                if (chrome.runtime.lastError) {
                    updateStatus('background-connection', 'error', '❌ Background通信失败: ' + chrome.runtime.lastError.message);
                    addLog('错误: Background通信失败 - ' + chrome.runtime.lastError.message, 'error');
                } else if (response && response.success) {
                    updateStatus('background-connection', 'success', '✅ Background通信正常');
                    addLog('Background通信测试通过', 'success');
                } else {
                    updateStatus('background-connection', 'warning', '⚠️ Background响应异常');
                    addLog('警告: Background响应异常', 'warning');
                }
            });
        }
        
        // 测试数据库访问
        function testDatabase() {
            addLog('开始测试数据库访问...');
            
            if (typeof chrome === 'undefined' || !chrome.runtime || !chrome.runtime.sendMessage) {
                updateStatus('database-access', 'error', '❌ Chrome API不可用，无法测试数据库');
                addLog('错误: Chrome API不可用，无法测试数据库', 'error');
                return;
            }
            
            // 测试获取任务
            chrome.runtime.sendMessage({action: 'getTasks'}, (response) => {
                if (chrome.runtime.lastError) {
                    updateStatus('database-access', 'error', '❌ 数据库访问失败: ' + chrome.runtime.lastError.message);
                    addLog('错误: 数据库访问失败 - ' + chrome.runtime.lastError.message, 'error');
                } else if (response && response.success) {
                    updateStatus('database-access', 'success', `✅ 数据库访问正常，获取到 ${response.tasks ? response.tasks.length : 0} 个任务`);
                    addLog(`数据库测试通过，获取到 ${response.tasks ? response.tasks.length : 0} 个任务`, 'success');
                } else {
                    updateStatus('database-access', 'warning', '⚠️ 数据库响应异常');
                    addLog('警告: 数据库响应异常', 'warning');
                }
            });
        }
        
        // 测试Vue.js加载
        function testVue() {
            addLog('开始测试Vue.js加载...');
            
            if (typeof Vue === 'undefined') {
                updateStatus('vue-loading', 'error', '❌ Vue.js未加载');
                addLog('错误: Vue.js未加载', 'error');
                return;
            }
            
            updateStatus('vue-loading', 'success', '✅ Vue.js已加载');
            addLog('Vue.js测试通过，版本: ' + Vue.version, 'success');
        }
        
        // 页面加载时自动运行基本测试
        window.onload = function() {
            addLog('页面加载完成，开始自动测试...');
            testChromeAPI();
            setTimeout(testBackgroundConnection, 500);
            setTimeout(testDatabase, 1000);
            setTimeout(testVue, 1500);
        };
    </script>
</body>
</html>